<template>
	<div class="doc_pc_components_Toggle">
		<div>
			单独使用:
			<Toggle
				v-model="value"
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value"
				disabled
				class="doc-Toggle"
			/>
			{{value}}
		</div>
		<div>
			文字:
			<Toggle
				v-model="value"
				active-text="开"
				inactive-text="关"
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value"
				active-text="开"
				inactive-text="关"
				class="doc-Toggle"
				style="width:48px;"
			>
				<template #open>启用</template>
				<template #close>停用</template>
			</Toggle>
			<Toggle
				v-model="value"
				active-text="开"
				inactive-text="关"
				disabled
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value"
				active-text="开"
				inactive-text="关"
				disabled
				class="doc-Toggle"
				style="width:48px;"
			>
				<template #open>启用</template>
				<template #close>停用</template>
			</Toggle>
		</div>
		<div>
			颜色:
			<Toggle
				v-model="value"
				color="green"
				class="doc-Toggle"
			/>
		</div>
		<div>
			大小:
			<Toggle
				v-model="value"
				size="26"
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value"
				size="26"
				active-text="开"
				inactive-text="关"
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value"
				size="26"
				class="doc-Toggle"
				style="width:70px;"
			>
				<template #open>启用</template>
				<template #close>停用</template>
			</Toggle>
			<Toggle
				v-model="value"
				size="26"
				active-text="开"
				inactive-text="关"
				disabled
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value"
				size="26"
				disabled
				class="doc-Toggle"
				style="width:70px;"
			>
				<template #open>启用</template>
				<template #close>停用</template>
			</Toggle>
		</div>
		<div>
			自定义值:
			<Toggle
				v-model="value4"
				:true-value="1"
				:false-value="0"
				class="doc-Toggle"
			/>
			{{value4}}
		</div>
		<div>
			数组:
			<Toggle
				v-model="value2"
				name="1"
				class="doc-Toggle"
				@active="open"
				@inactive="close"
			/>
			<Toggle
				v-model="value2"
				name="2"
				class="doc-Toggle"
				@active="open"
				@inactive="close"
			/>
			<Toggle
				v-model="value2"
				name="3"
				class="doc-Toggle"
				@active="open"
				@inactive="close"
			/>
			<Toggle
				v-model="value2"
				name="4"
				class="doc-Toggle"
				@active="open"
				@inactive="close"
			/>
			{{value2}}
		</div>
		<div>
			MySet:
			<Toggle
				v-model="value3"
				name="1"
				class="doc-Toggle"
				@active="open"
				@inactive="close"
			/>
			<Toggle
				v-model="value3"
				name="2"
				class="doc-Toggle"
				@active="open"
				@inactive="close"
			/>
			<Toggle
				v-model="value3"
				name="3"
				class="doc-Toggle"
				@active="open"
				@inactive="close"
			/>
			<Toggle
				v-model="value3"
				name="4"
				class="doc-Toggle"
				@active="open"
				@inactive="close"
			/>
			{{Array.from(value3.value)}}
		</div>
		<div>
			手动控制:
			<Toggle
				active
				class="doc-Toggle"
			/>
			<Toggle
				:active="false"
				class="doc-Toggle"
			/>
		</div>
		<div>
			单独使用,切换前置处理:
			<Toggle
				v-model="value"
				:before-change="beforeChange"
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value4"
				:true-value="1"
				:false-value="0"
				:before-change="beforeChange"
				class="doc-Toggle"
			/>
		</div>
		<div>
			组合使用,切换前置处理:
			<Toggle
				v-model="value2"
				name="1"
				:before-change="beforeChange"
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value2"
				name="2"
				:before-change="beforeChange"
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value2"
				name="3"
				:before-change="beforeChange"
				class="doc-Toggle"
			/>
			<Toggle
				v-model="value2"
				name="4"
				:before-change="beforeChange"
				class="doc-Toggle"
			/>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {Toggle,util} from 'powerful-ui/pc-default';

const value=shallowRef(false);
const value2=shallowRef([]);
const value3=shallowRef(new util.MySet());
const value4=shallowRef(0);

function open(data){
	console.log('打开',data);
}
function close(data){
	console.log('关闭',data);
}
function beforeChange(data){
	console.log('即将切换',data);
	return false;
}
</script>

<style lang="scss">
.doc_pc_components_Toggle{
	>div{
		margin:20px;
	}
	.doc-Toggle{
		margin-right:20px;
	}
}
</style>